<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">确认交易</x-header>
    <div class="top">
      <countup :end-val="totalprice"
               :duration="1.5"
               :decimals="2"
               class="moneynum"></countup>
      <p style="font-size:12px;">支付总价</p>
      <div class="rows">
        <x-input title="交易单价:"
                 v-bind:id="unitprice | money"
                 v-model="unitprice"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"
                 disabled></x-input>
        <x-input title="交易数量:"
                 v-bind:id="quantity | money"
                 v-model="quantity"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"
                 disabled></x-input>
      </div>
    </div>
    <div class="middle_top">
      <h3>支付方式</h3>
      <span class="innowtext"
            @click="$router.push('/credited')">添加账户</span>
    </div>
    <div class="middle">
      <div class="yue"><i class="ye-icon"></i>余额
        <checklist :options="sendContent0"
                   v-model="radioValue"
                   :max="1"
                   label-position=left
                   @on-change="change"></checklist>
      </div>
      <div class="zhifubao"><i class="zfb-icon"></i>支付宝
        <checklist :options="sendContent"
                   v-model="radioValue"
                   :max="1"
                   label-position=left
                   @on-change="change"></checklist>
      </div>
      <!-- <div class="card"><i class="card-icon"></i>银行卡
        <checklist :options="sendContent1"
                   v-model="radioValue"
                   :max="1"
                   label-position=left
                   @on-change="change"></checklist>
      </div> -->
    </div>
    <button @click="pricement">确认进货</button>

    <div v-transfer-dom>
      <popup v-model="show">
        <div class="popup0">
          <group>
            <cell title="支付宝"
                  link="/myaddweixinuser"
                  inline-desc=''></cell>
            <cell title="银行卡"
                  link="/myaddCard"
                  inline-desc=''></cell>
          </group>
        </div>
      </popup>
    </div>

    <dialog-bar v-model="sendVal"
                type="danger"
                title="选择账户"
                :content="sendContent"
                v-on:child-say="listenToMyBoy">
    </dialog-bar>
    <dialog-bar2 v-model="sendVal2"
                 type="danger"
                 title="选择账户"
                 :content="sendContent1"
                 v-on:child-say="listenToMyBoy1">
    </dialog-bar2>
    <dialog-Tips v-model="sendVal3"
                 type="danger"
                 title="注意事项"
                 :content="sendContent2">
    </dialog-Tips>
  </div>
</template>
<script>
import '../../filters/moneyfilter.js'
import dialogBar from './components/dialogs.vue'
import dialogbar2 from './components/dialogCard.vue'
import dialogTips from './components/dialogTips.vue'
import { mapMutations, mapState } from 'vuex'
import { GetQueryString } from '@utils/mixin'
import Vue from 'vue'
import { Confirm } from 'wc-messagebox'
import 'wc-messagebox/style.css'
import { getPaymenAccountList, pushp2ppaymentorder, addtransactionrecord, pushp2ppaymentother, updatatransactionrecord, getcapitalbuy, getP2PUserPositions } from '@api'
import { Countup, XInput, Checklist, Popup, Cell, Group, TransferDom } from 'vux'
Vue.use(Confirm)
// import { SET_LOADING } from '@store/type'
export default {
  directives: {
    TransferDom
  },
  components: {
    'dialog-bar': dialogBar,
    'dialog-bar2': dialogbar2,
    'dialog-Tips': dialogTips,
    Countup,
    XInput,
    Checklist,
    Popup,
    Cell,
    Group
  },
  computed: {
    ...mapState(['user', 'token', 'openid'])
  },
  data () {
    return {
      usermoney: 0.00, // 用户余额
      totalprice: 0.00, // 交易总价
      unitprice: 0.00, // 交易单价
      quantity: 0.00, // 交易数量
      sendVal: false,
      sendVal2: false,
      sendVal3: false,
      sendContent0: [], // 余额账户信息
      sendContent: [], // 选择支付宝账户内容
      sendContent1: [], // 选择銀行卡内容
      sendContent2: '这是注意事项内容', // 注意事項内容

      account_type: 0, // 提现账户类型
      account_name: '', // 姓名
      account_number: '', // 账户
      account_open_bank: '', // 开户行
      payType: 0,
      show: false,
      radioValue: [],
      no: '' // 创建的订单号
    }
  },
  methods: {
    ...mapMutations({
    }),
    change (val, label) {
      var arr = (label[0] || '').split('&nbsp&nbsp')
      if (arr[0] === '支付宝') {
        this.account_type = 3
        this.payType = 1
      } else if (arr[0] === '账户余额') {
        this.account_type = 1
        this.payType = 2
      } else if (arr[0] === '银行卡') {
        this.account_type = 2
      }
      this.account_name = arr[2]
      this.account_number = arr[1]
      this.account_open_bank = arr[0]
    },
    async isoks () {
      // 获取保本金订单
      let form = new FormData()
      form.append('userid', this.user.user_id)
      form.append('goodsid', this.$route.query.id)
      let re = await getcapitalbuy(form)

      if (re && re.code === 200) {
        var ff = new FormData()
        ff.append('record_id', re.data.record_id)
        ff.append('record_user_id', re.data.record_user_id)
        ff.append('record_goods_id', re.data.record_goods_id)
        ff.append('record_transaction_num', re.data.record_transaction_num)
        ff.append('record_transaction_means', re.data.record_transaction_means)
        ff.append('commission_price', re.data.commission_price)
        ff.append('final_price', re.data.final_price)
        ff.append('commission_num', re.data.commission_num)
        ff.append('trading_status', re.data.trading_status)
        ff.append('record_time', re.data.record_time)
        ff.append('record_the_term', re.data.record_the_term)
        ff.append('record_mode', re.data.record_mode)
        ff.append('paymentmethod', re.data.paymentmethod)
        ff.append('pay_status', re.data.pay_status)
        ff.append('withdrawal', re.data.withdrawal)
        ff.append('record_sn', re.data.record_sn)
        var up = await updatatransactionrecord(ff)
        if (up) {
          console.log('保本金活动已自动退出！')
        }
      }
    },
    // 交易支付
    async pricement () {
      if (this.account_name === '' || this.account_number === '' || this.account_open_bank === '') {
        return this.$toastText('请先选择支付账户！')
      }
      if (this.payType === 1) {
        // 创建交易记录 待支付
        let formadd = new FormData()
        formadd.append('record_user_id', this.user.user_id) // 交易用户
        formadd.append('record_goods_id', this.$route.query.id) // 交易商品id
        formadd.append('commission_price', this.unitprice) // 交易委托单价
        formadd.append('commission_num', this.quantity) // 交易委托数量
        formadd.append('paymentmethod', this.account_type) // 交易支付方式
        var resadd = await addtransactionrecord(formadd) // 添加未支付订单 等待支付
        if (resadd && resadd.code === 200) {
          this.no = resadd.data

          let code = GetQueryString('code')
          let form = new FormData()
          form.append('order_no', this.no)
          form.append('price', this.totalprice)
          form.append('order_type', 'goods')
          form.append('pay_type', this.payType)
          form.append('code', code)
          form.append('body', this.no)
          form.append('attach', this.no)
          form.append('return_url', window.location.href)
          if (this.openid) {
            form.append('openid', this.openid)
          }

          let res = await pushp2ppaymentorder(form)
          if (res && res.code === 200) {
            if (res.data.type === 'ali_jsapi') {
              this.$AliPay(res.data)
            }
          }
        }
      } else if (this.payType === 2) {
        if (this.usermoney < this.totalprice) {
          this.$toastText('余额不足！')
          return false
        }
        // 创建交易记录 待支付
        let formadd = new FormData()
        formadd.append('record_user_id', this.user.user_id) // 交易用户
        formadd.append('record_goods_id', this.$route.query.id) // 交易商品id
        formadd.append('commission_price', this.unitprice) // 交易委托单价
        formadd.append('commission_num', this.quantity) // 交易委托数量
        formadd.append('paymentmethod', this.account_type) // 交易支付方式
        var resadds = await addtransactionrecord(formadd) // 添加未支付订单 等待支付
        if (resadds && resadds.code === 200) {
          this.no = resadds.data
          let form = new FormData()
          form.append('order_no', resadds.data)
          form.append('userid', this.user.user_id)
          form.append('goodsid', this.$route.query.id)
          let res = await pushp2ppaymentother(form)
          if (res && res.code === 200) {
            if (this.$route.query.isok) {
              // 退出保本金活动政策
              this.isoks()
            }
            this.$router.replace({
              path: '/p2ppaySuccess',
              query: {
                id: this.$route.query.id,
                price: this.totalprice,
                no: this.no,
                goBack: -2
              }
            })
          } else {
            this.$toastText('支付失败：' + JSON.stringify(res))
          }
        }
      }
    },
    listenToMyBoy: function (val) {
      this.paymenttype = val[0]
      this.paymentname = val[1]
      this.paymentcard = val[2]
    },
    listenToMyBoy1: function (val) {
      this.paymenttype = val[0]
      this.paymentname = val[1]
      this.paymentcard = val[2]
      this.paymentopenbank = val[3]
    },
    // 加载页面数据
    async loadData () {
      // 查询用户持仓信息
      let form = new FormData()
      form.append('position_goods_id', this.$route.query.id)
      form.append('position_user_id', this.user.user_id)
      let useryue = await getP2PUserPositions(form)
      if (useryue && useryue.code === 200) {
        if (useryue.data.position_balance != null) {
          this.usermoney = useryue.data.position_balance
        }
      }

      this.unitprice = this.$route.query.transactionparice// 交易单价
      this.quantity = this.$route.query.transactionnum // 交易数量
      this.totalprice = this.unitprice * this.quantity
      var userid = this.user.user_id
      var usertype = 2
      this.sendContent0 = [] // 余额账户信息
      this.sendContent = [] // 选择支付宝账户内容
      this.sendContent1 = [] // 选择銀行卡内容
      this.sendContent0.push('账户余额&nbsp&nbsp' + this.usermoney)

      // 获取用户收款账户列表
      let res = await getPaymenAccountList(userid, usertype)
      if (res.code === 200) {
        for (let i = 0; i < res.data.length; i++) {
          switch (res.data[i].account_type) {
            case 0:
              this.sendContent1.push(res.data[i].bank_name + '&nbsp&nbsp' + res.data[i].account_number + '&nbsp&nbsp' + res.data[i].account_name)
              break
            case 1:
              this.sendContent.push(res.data[i].bank_name + '&nbsp&nbsp' + res.data[i].account_number + '&nbsp&nbsp' + res.data[i].account_name)
              break
            default:
              break
          }
        }
      }
    }
  },
  created () {

  },
  activated () {
    // 加载页面数据
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/css/pub';
  .popup0 {
    padding-bottom: .1875rem;
    height: 2.5rem;
  }
  .view {
    width: 100%;
    text-align: center;
    padding-bottom: 1.306667rem;
    .innow {
      position: fixed;
      right: .225rem;
      font-size: .375rem;
      color: #666666;
    }
    .innow:hover {
      color: #ff0036;
    }
    .innowtext {
      position: fixed;
      right: .225rem;
      font-size: 0.3rem;
      color: #666666;
    }
    .innowtext:hover {
      color: #ff0036;
    }
    .top {
      width: 100%;
      margin-top: 5%;
      p {
        padding-top: 3%;
        color: #666666;

        i {
          margin-left: .25rem;
        }
      }
      .moneynum {
        font-size: .7rem;
        font-weight: bold;
        color: #ff0036;
      }
      input {
        width: 5.7875rem;
        height: .6625rem;
        border: .025rem solid #c7c7c7;
        border-radius: .1rem;
        padding-left: .1rem;
      }
      .row {
        width: 5.7875rem;
        background: #ff0036;
        margin-top: 2%;
        margin-left: 20%;
      }
      .rows {
        background: #fff;
        margin: 5%;
        border-radius: .125rem;
      }
    }
    .middle_top {
      text-align: left;
      padding-left: 0.5%;
      line-height: .925rem;
      font-family: MicrosoftYaHei;
      h3 {
        color: #000000;
        padding: 3%;
        margin-left: .125rem;
        display: inline;
        font-weight: normal;
      }
    }
    font {
      color: #666666;
    }
    .middle {
      background-color: #fff;
      text-align: left;
      .yue {
        line-height: .925rem;
        border-bottom: 2px solid #f7f7f7;
        margin-left: 4%;
        .ye-icon {
          margin-right: .125rem;
        }
      }
      .zhifubao {
        line-height: .925rem;
        border-bottom: .025rem solid #f7f7f7;
        margin-left: 4%;
        .zfb-icon {
          margin-right: .125rem;
        }
      }
      .card {
        line-height: .925rem;
        border-bottom: .025rem solid #f7f7f7;
        margin-left: 4%;
        .card-icon {
          margin-right: .125rem;
        }
      }
    }
    .weixinn {
      width: .5rem;
      height: .5rem;
      background: url("http://img.zanjl.com/Content/img/image/gray-icon@2x.png")
      no-repeat;
      background-size: 100%;
      float: right;
      margin: 2%;
    }
    .card-btn {
      width: .5rem;
      height: .5rem;
      background: url("http://img.zanjl.com/Content/img/image/gray-icon@2x.png")
      no-repeat;
      background-size: 100%;
      float: right;
      margin: 2%;
    }
    .detail-selected {
      background: url("http://img.zanjl.com/Content/img/image/redgou@2x.png")
      no-repeat;
      background-size: 100%;
    }
    button {
      text-align: center;
      width: 100%;
      height: 1.225rem;
      position: fixed;
      left: 0;
      bottom: 0;
      border: 0;
      color: #fff;
      background: #ff0036;
    }
  }
</style>
